<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>树组件</title>
    <link rel="stylesheet" href="../_media/layui/css/layui.css">
    <script src="../_media/layui/layui.js"></script>
    <!-- <script src="../_media/jquery-3.6.0.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- 内核 -->
    <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.2/cloudbase.js"></script>
    <!-- 登录模块 -->
    <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.2/cloudbase.auth.js"></script>
    <!-- 云函数模块 -->
    <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.2/cloudbase.functions.js"></script>
    <!-- 云数据库模块 -->
    <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.2/cloudbase.full.js "></script>
    <style>
        .layui-tree-txt {
            font-family: fantasy;
        }

        /* 定义字体 */
        @font-face {
            font-family: HanDanZhaoYuanCuPinYinTi;
            src: url("../_media/font/HanDanZhaoYuanCuPinYinTi.ttf");
        }
        @font-face {
            font-family: XiaoDouDaoQiuRiHeJianFan;
            src: url("../_media/font/XiaoDouDaoQiuRiHeJianFan.ttf");
        }
    </style>
</head>

<body>
    <div class="layui-row" style="background-color:#eeeeee">
        <ul class="layui-nav" lay-bar="disabled" style="height: 30px;">
            <i class="layui-icon layui-icon-template" style="font-size: 30px; color: #1E9FFF;"></i>
            <li class="layui-nav-item" style="margin-top:-20px">
                <a
                    href="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx4aa7c1c7ec1a905b&secret=eb7a39217bfe45c8552c0fa0cef03a6d" style="font-family: XiaoDouDaoQiuRiHeJianFan;">收藏文章数:
                    <span class="layui-badge" id="totalNum">9</span>
                </a>
            </li>

        </ul>
        <div class="layui-col-xs12 layui-col-md12">
            <div class="layui-panel" style=" margin: 0px 5px 10px 5px;">
                <div id="test1" style="font-size: larger; background-image:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.ppt123.net%2Fpptbj%2F51%2F20181115%2Fvgqmk4nc1ab.jpg&refer=http%3A%2F%2Fdl.ppt123.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637202118&t=8ba2eea12f8aaa036a742d569678a888);background-size: cover;">树</div>

            </div>
        </div>
    </div>
    <script>
        var url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx4aa7c1c7ec1a905b&secret=eb7a39217bfe45c8552c0fa0cef03a6d"

        //根据xpath获取元素
        function $x(STR_XPATH) {
            var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
            var xnodes = [];
            var xres;
            while (xres = xresult.iterateNext()) {
                xnodes.push(xres);
            }
            return xnodes;
        }


        jQuery(document).ready(function () {



            // $.ajax({
            //     type: "get", //jquey是不支持post方式跨域的
            //     async: false,
            //     url: url, //跨域请求的URL
            //     dataType: "jsonp",
            //     data: {},
            //     //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
            //     jsonp: "callback",
            //     //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            //     jsonpCallback: "success_jsonpCallback",

            //     //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
            //     success: function (json) {
            //         alert(json);
            //     },
            //     error: function (xhr, type) { //【失败回调】
            //         alert(type)
            //     }
            // });

            $.ajax({
                url: "./articleData.json",//json文件位置，文件名
                type: "GET",//请求方式为get
                dataType: "json", //返回数据格式为json
                success: function (data) {//请求成功完成后要执行的方法
                    //给info赋值给定义好的变量
                    var totalNum = data["totalNum"];
                    $("#totalNum").text(totalNum.toString());

                    var dataTree = data["dataTree"];
                    layui.use('tree', function () {
                        var tree = layui.tree;

                        //手风琴模式
                        tree.render({
                            elem: '#test1'
                            , isJump: true
                            , data: dataTree
                            , accordion: true
                        });
                    });
                    var levelOne = $x('//*[@id="test1"]/div/div[1]/div[1]/div/span[2]')
                    setTimeout(function () {
                        //测试加载
                        while (levelOne.length == 0) {
                            levelOne = $x('//*[@id="test1"]/div/div[1]/div[1]/div/span[2]')
                        }
                        //循环修改1级
                        var numOneLev = 1;
                        while (true) {
                            var elem = $x('//*[@id="test1"]/div/div[' + numOneLev.toString() + ']/div[1]/div/span[2]');
                            if (elem.length > 0) {
                                elem = elem[0];
                                elem.setAttribute('style', 'font-size: 25px;font-weight: bold;font-family:"XiaoDouDaoQiuRiHeJianFan", serif;');
                                //修改二级
                                var numTwoLev = 1;
                                while (true) {
                                    var elem2 = $x('//*[@id="test1"]/div/div[' + numOneLev.toString() + ']/div[2]/div[' + numTwoLev.toString() + ']/div[1]/div/span[2]');
                                    if (elem2.length > 0) {
                                        elem2 = elem2[0];
                                        elem2.setAttribute('style', 'font-size: 21px;color: #4a595e;font-weight: bold;font-family:XiaoDouDaoQiuRiHeJianFan');
                                    }
                                    else {
                                        break;
                                    }
                                    numTwoLev += 1;
                                }
                            }
                            else {
                                break;
                            }
                            numOneLev += 1;
                        }
                        // debugger
                        var ele = levelOne[0];

                    }, 100);


                }

            });
        });
    </script>
</body>

</html>